@import "./businessTheme";

//  通用css
#app {
  //  修改element滚动条
  .el-scrollbar {
    height: 100%;
    overflow-x: hidden;

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

  //  铺满容器
  .full-container {
    width: 100%;
    height: 100%;
  }

  .farmer-info-root,.chit-info-root {
    box-sizing: border-box;
    border-bottom: 1px solid rgba(220, 223, 230, 1);
    padding-bottom: 20px;
    .img-container {
      height: 100%;
      width: 10%;
      justify-content: center;
      align-items: center;

     .el-avatar--large {
        height: 60px;
        width: 60px;
      }
    }

    .txt-container {
      width: 80%;

      .title-container {
        height: 50%;

        .title-txt {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0px;
        }

        .age-txt {
          border-radius: 12px;
          background: rgba(32, 125, 255, 0.1);
          padding: 2px 5px;
          height: max-content;
          margin-left: 10px;
        }

        .farmer-sex-txt {
          position: relative;
          top: 2px;
          height: 20px;
          margin-left: 10px;
          width: 20px;


          ::v-deep .el-image {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              height: 90%;
              width: 90%;
            }
          }
        }
      }

      .txt-item {
        margin-right: 20px;

        .label {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(144, 147, 153, 1);
          text-align: right;
          vertical-align: top;
        }

        .value {
          position: relative;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(48, 49, 51, 1);
        }
      }


      .other-txt-container {
        height: 50%;
        align-items: center;

      }
    }

    .bt-container {
      width: 10%;
    }
  }


  //  设置分割容器
  .splitpanes {
    height: 100%;
    width: 100%;
    background: transparent;

    .splitpanes__pane {
      height: 100%;
      background: transparent;
    }
  }

  //  设置特殊的地图容器
  .diy-map {
    border-radius: $border-radius;
    overflow: hidden;
  }

  //  flex column布局
  .flex-column {
    display: flex;
    flex-direction: column;
  }

  //  flex row布局
  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .form-item-parent{
    justify-content: space-between;
  }

  .no-margin {
    margin: 0;
  }

  // 设置文字颜色渐变
  .text-color-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(130, 184, 255, 1));
    -webkit-background-clip: text;
    color: transparent;
  }

  //设置标题字体公共样式
  .title-font-style {
    //设置字体样式
    font-size: $title-size;
    letter-spacing: 3px;
    font-weight: bold;
  }

 .el-form{
    .el-form-item.column-item{
      display: flex;
      flex-direction: column;

      .el-form-item__label{
        width: 100% !important;
        display: flex;
        justify-content: flex-start;
      }

      .el-form-item__content{
        margin-left: 0 !important;
      }
    }
    .el-form-item.row-item{
      width: 100%;

      .el-form-item__content{
        display: flex;
        justify-content: space-between;
        width: 100% !important;
        margin: 0 !important;
        &::before,&::after{
          width: 0;
          height: 0;
        }
      }
    }
    .el-form-item.half-item{
      width: 49%;
      display: inline-block;
      .el-form-item__content{
        .el-date-editor{
          width: 100%;
        }
      }
    }
  }


  //  设置查询容器布局
  .query-content-container {
    .query-form-container {
      justify-content: flex-start;
      align-items: center;

      .form-container, .bt-container {
        box-sizing: border-box;
      }

      .form-container {
        width: 100%;
      }
    }
  }

  //  详情页面
  .info-data-container {
    .info-base-data {
      height: max-content;
      max-height: 30%;
      width: 100%;

      .el-select {
        width: 100%;
      }
    }

    .list-container {
      width: 100%;
      height: 65%;
    }

    .handle-bt-container {
      width: 100%;
      height: 5%;
      justify-content: flex-start;
      align-items: flex-end;
    }
  }

  //设置列表组件头部公共样式
  .list-page-header {
    display: flex; //设为弹性盒子
    flex-direction: row;
    align-items: center;
    background: $page-back-color;
    position: relative; //设为相对定位供下边的横线绝对定位

    .list-page-header-title-ico {
      width: 20px;
      height: 25px;
    }


    //设置字体样式
    span {
      //设置与左侧图标间距
      margin-left: 20px;
      font-size: 20px;
      font-weight: bold; //加粗
    }

    //设置title下方横线样式
    .list-page-header-title-line {
      position: absolute;
      left: 52px;
      bottom: -8px;
    }

    //设置title下橙色横线样式
    .list-page-header-title-orange-line {
      position: absolute;
      bottom: -8px;
    }
  }


  //设置列表公共样式
  .diy-table {
    .el-table__row {
      //设置值为无效时的字体颜色
      .invalid-green {
        color: green;
      }

      //设置值为有效时的字体颜色
      .effective-red {
        color: red;
      }

      //设置鼠标划过时文字颜色
      &:hover {
        color: $form-txt-blue;
      }

      //设置详情和删除的字体颜色
      .el-button--text {
        color: $form-txt-blue;
      }
    }
  }

  //设置按钮样式
  .diy-bt.el-button {
    //设置文字颜色
    color: $form-txt-blue;
    //设置鼠标划过及单击后的效果
    &:hover, &:focus {
      border-color: $form-txt-blue;
      color: rgba(255, 255, 255, 1);
      background: $form-txt-blue;
    }
  }


  //  设置渐变按钮样式
  .el-button.txt-bt {
    border: none;
    padding: 7px 10px;

    &:hover, &:focus {
      border: none;
      background: transparent;
    }

    span {
      margin-left: 10px;
    }

    i, span {
      display: inline-block;
      //rgba(32, 125, 255, 0.6)
      background: linear-gradient(to bottom, rgba(32, 125, 255, 0.6), rgba(32, 125, 255, 1));
      -webkit-background-clip: text;
      color: transparent;
      font-size: 20px;
      font-weight: 900;
      //font-style: italic;
    }
  }

  //  地图弹框
  .esri-popup {
    .esri-popup__main-container.esri-widget {
      width: max-content;
      background: transparent;

      .esri-popup__footer {
        display: none;
      }

      .esri-popup__header {
        display: none;
      }

      .esri-popup__content {
        margin: 0;
        background: transparent;
      }
    }

    .esri-popup__pointer {
      .esri-popup__pointer-direction {
        background: $form-txt-blue;
      }
    }
  }

  .important-txt{
    font-size: 20px !important;
    color: red !important;
    font-weight: bold !important;
  }

}
